<template>
    <div class="table">
    <vxe-toolbar>
        </vxe-toolbar>
  
        <vxe-table
          border
          resizable
          show-overflow
          ref="xTable"
          max-height="400"
          header-row-class-name="tableHeader"
          header-cell-class-name="tableHeader"
          cell-class-name="tableBody"
          :data="tableData"
          :edit-config="{trigger: 'click', mode: 'row'}"
          @edit-actived="editActivedEvent">
          <vxe-column field="email" title="指导老师邮箱" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ formatRole(row.email) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.email" clearable transfer @change="roleChangeEvent" >
                <vxe-option v-for="item in teacherList" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column title="姓名" :edit-render="{}" >
            <template #default="{ row }">
              <span>{{row.email.name}}</span>
            </template>
            <template #edit="{ row }">
              {{row.email.name}}
            </template>
          </vxe-column>
          <vxe-column title="研究方向" :edit-render="{}">
            <template #default="{ row }">
              <span>{{row.email.guildence}}</span>
            </template>
            <template #edit="{ row }">
              {{row.email.guildence}}
            </template>
          </vxe-column>
          <vxe-column title="备注" :edit-render="{}">
            <template #default="{ row }">
              <span>{{row.email.introduction}}</span>
            </template>
            <template #edit="{ row }">
                {{row.email.introduction}}
            </template>
          </vxe-column>
        </vxe-table>
        </div>
  </template>
  <script>
  
  export default {
          data () {
            return {
              tableData: [
                {name:'李老师', guildence: '自然语言', introduction: '自我', email:'1@qq.com'},
                {name:'陈老师', guildence: '未知方向', introduction: '介绍', email:'2@qq.com'},
                {name:'刘老师', guildence: '数据挖掘', introduction: '随便', email:'3@qq.com'},
                {name:'王老师', guildence: '区块链链', introduction: '乱写', email:'4@qq.com'},
              ],
              teacherList: [
                { label: '1@qq.com 李老师', value: {name:'李老师', guildence: '自然语言', introduction: '自我', email:'1@qq.com'}, disabled: false },
                { label: '2@qq.com 陈老师', value: {name:'陈老师', guildence: '未知方向', introduction: '介绍', email:'2@qq.com'}, disabled: false },
                { label: '3@qq.com 刘老师', value: {name:'刘老师', guildence: '数据挖掘', introduction: '随便', email:'3@qq.com'}, disabled: false },
                { label: '4@qq.com 王老师', value: {name:'王老师', guildence: '区块链链', introduction: '乱写', email:'4@qq.com'}, disabled: false },
                { label: '5@qq.com 林老师', value: {name:'林老师', guildence: '语音处理', introduction: '啦啦', email:'5@qq.com'}, disabled: false }
              ],
              edit: false,
            }
          },
          created () {
            this.$nextTick(() => {
              this.updateRoleList()
            })
          },
          methods: {
            formatRole (value) {
              const item = this.teacherList.find(item => item.value === value)
              return value.email
            },
            updateRoleList () {
              const $table = this.$refs.xTable
              // 获取表格中的全量数据
              const { fullData } = $table.getTableData()
              this.teacherList.forEach(item => {
                if (item.value) {
                  // 如果当前选项已经被选过，则禁用
                  item.disabled = fullData.some(row => row.email === item.value)
                }
              })
  
            },
            roleChangeEvent ({ row }) {
              this.updateRoleList()
            },
            editActivedEvent ({ row }) {
              // 激活编辑时检查剩余选项是否可选择
              this.updateRoleList()
            },
          }
        }
  </script>
  <style>
  .table{
    width: 100%;
  }
  .tableHeader{
    background-color: rgb(225, 225, 225);
    border: solid 1px #707070;
  }
  .tableBody{
    background-color: #fafafa;
    border: solid 1px #707070;
  }
  .vxe-select.is--active:not(.is--filter) > .vxe-input > .vxe-input--inner{
    border: 1px solid #707070 !important;
  }
  </style>